<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { Pagination, Grid } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import router from "@/router";
import "swiper/css";
import "swiper/css/grid";
import "swiper/css/pagination";
// import "swiper/css/navigation";


export default defineComponent({
  name: 'swiper-example-slides-per-column',
  title: 'Multi row slides layout',
  url: import.meta.url,
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
    source: {
      type: Number,
      reuqired: true,
    },
    closeAll: {
      type: Function,
      reuqired: true,
    },
  },
  setup(props: any) {
    const screenGroup = ref(6)
    const toPush = (item: any) => {
      if (props.source == 1) {
        router.push({
          path: "/Solutions",
          query: {
            id: item.id,
            name: item.name,
            t: Date.now()
          },
        });
      } else if (props.source == 2) {
        router.push({
          path: "/Products",
          query: {
            id: item.id,
            name: item.name,
            t: Date.now()
          },
        });
      } else if (props.source == 3) {
        router.push({
          path: "/Components",
          query: {
            id: item.id,
            name: item.name,
            t: Date.now()
          }
        })
      } else {
        router.push({
          path: `${item.url}`
        })
      }
      props.closeAll();
    };
    const drawData = props.data;
    onMounted(() => {
      /**
       * @methods 控制显示数量 
       */
      window.addEventListener('resize', () => {
        let screenWidth = document.body.clientWidth
        if (screenWidth <= 1200) {
          screenGroup.value = 5
        } else {
          screenGroup.value = 6
        }
      })
    })
    return {
      screenGroup,
      toPush,
      drawData,
      modules: [Pagination, Grid],
    };
  },
});
</script>

<template>
  <div>
    <swiper class="swiper" :modules="modules" :slides-per-view="screenGroup" :grid="{ rows: 2 }"
      v-if="drawData.length > 6">
      <swiper-slide class="slide pointer " v-for="(item, index) in drawData" :key="index" @click="toPush(item)">
        <div class="scaleImgCard">
          <div class="drawImg">
            <img :src="item.cover_image" alt="" />
          </div>
          <div class="contentText drawTitle">{{ item.name }}</div>
        </div>
      </swiper-slide>
    </swiper>
    <el-row :gutter="20" class="drawvue" v-else>
      <el-col class="pointer" :span="6" v-for="(item, index) in drawData" @click="toPush(item)" :key="index">
        <!-- 旧样式 -->
        <!-- <div class="">
          <div class="drawImg scaleImgCard">
            <img :src="item.cover_image" alt="" />
          </div>
          <div class="contentText drawTitle">{{ item.name }}</div>
        </div> -->
        <!-- 新样式 -->
        <div class="solution_card scaleImgCard">
          <img :src="item.cover_image" alt="">
          <div>
            <div class="solution_card_name secondTitle">{{ item.name }}</div>
            <div class="solution_card_descr">{{ item.descr }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<style lang="scss" scoped>
.swiper {
  // padding-bottom: 30px;

  .slide {
    padding-bottom: 20px;
    padding-right: 20px;
  }
}

.drawvue {
  width: 100%;
}

.drawImg {
  overflow: hidden;
  width: 100%;
  height: 150px;
  background-color: #fff;
  border-radius: 20px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
  }
}

.drawTitle {
  text-align: center;
  color: $auxiliaryColor;
  font-weight: bold;
  margin-top: 10px;
}


.solution_card{
  width: 100%;
  display: flex;
  background:#FAFCFF;
  padding: 20px 10px 20px 10px;
  border-radius: 10px;

  .solution_card_name{
    font-size: 28px;
    color: #172E59;
    margin: 0px 0 0 5px;
  }

  .solution_card_descr{
    font-size: 16px;
    color: #172E59;
    margin: 18px 0 0 5px;
  }
}

.solution_card:hover{
  // box-shadow: 0px 0px 10px 0 #999;
}

:deep(.swiper-grid-column>.swiper-wrapper) {
  flex-direction: row;
}

:deep(.swiper-wrapper) {
  width: 100% !important;
}
</style>